<!--
    @name 预约确认
    @author 丁浩洋
    @time 2021-1-22
 -->
<template>
  <section class="appointment-confirm">
    <OneTableTemplate
      ref="multipleTable"
      :dynamic-is-init-table="true"
      :dynamic-components="formInputs"
      :dynamic-buttons="formButtons"
      :dynamic-table-cols="tableHeader"
      :dynamic-api-config="apiConfig"
      :dynamic-form-fields="formField"
    />
    <CancelExplain
      :explain-visible.sync="explainVisible"
      :reserve-order-code="reserveOrderCode"
      :update-control-id="updateControlId"
      :car-series-code="carSeriesCode"
      :car-series-cn="carSeriesCn"
      @closePop="closePop"
      @selectTable="selectTable"
    />
    <CancelExamine
      :examine-visible.sync="examineVisible"
      :params-data="paramsData"
      @closePop="closePop"
      @selectTable="selectTable"
    />
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import CancelExplain from '@/components/se/appointmentConfirm/cancelExplain'
import CancelExamine from '@/components/se/appointmentConfirm/cancelExamine'
export default {
  name: 'AppointmentSelect',
  components: {
    OneTableTemplate,
    CancelExplain,
    CancelExamine
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      apiConfig: {
        ServiceCode: 'AppointmentConfirm',
        APIUrl:
          '/mp/e3sh/aftersale/QueryAndConfirmAppointmentService/AppointmentConfirm.do'
      },
      formInputs: [
        {
          compKey: 'key0',
          labelName: '预约时间：',
          codeField: 'preComeDateStart,preComeDateEnd',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker'),
          dateType: 'daterange',
          isMust: true
        },
        {
          compKey: 'key1',
          labelName: '服务顾问：',
          codeField: 'saNameCode',
          component: () => import('@/components/org/commonSelect'),
          oFields: 'empCode,empName',
          customObj: {
            api: {
              APIUrl: '/mp/e3sh/aftersale/appointmentVolumnService/queryServiceAdvisor.do'
            }
          },
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key2',
          labelName: '预约来源：',
          codeField: 'reserveSourceCode',
          lookuptype: 'SE0171',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl: '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            }
          },
          type: 'dropdownList',
          isMust: true
        }
      ],
      formButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.queryTable(),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        }
      ],
      tableHeader: [
        {
          prop: 'updateControlId',
          label: '并发控制ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'aaa',
          label: '操作', // 操作
          codeField: 'orgName',
          width: 100,
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey3',
              align: 'center',
              labelName: '接单',
              codeField: 'orgName',
              rowFileds: 'show:reserveStateCode--20|1|2|5',
              clickEvent: (index) => this.receivingOrder(index),
              component: () => import('@/components/org/linkButton')
            },
            {
              compKey: 'propKey1',
              align: 'center',
              labelName: '取消',
              codeField: 'orgName1',
              rowFileds: 'show:reserveStateCode--5|1|2',
              clickEvent: (index) => this.openExplain(index),
              component: () => import('@/components/org/linkButton')
            },
            {
              compKey: 'propKey2',
              align: 'center',
              labelName: '审核',
              codeField: 'orgName2',
              rowFileds: 'show:reserveStateCode-5',
              clickEvent: (index) => this.openExamine(index),
              component: () => import('@/components/org/linkButton')
            }
          ]
        },
        {
          label: '预约单号',
          prop: 'reserveOrderCode'
        },
        {
          label: '车牌号',
          prop: 'carLicense'
        },
        {
          label: '客户名称',
          prop: 'custName'
        },
        {
          label: '预约人',
          prop: 'reserveMan'
        },
        {
          label: '预约电话',
          prop: 'reserveTel'
        },
        {
          label: '预约时间',
          prop: 'preComeDate'
        },
        {
          label: '预约状态',
          prop: 'reserveState'
        },
        {
          label: '服务顾问',
          prop: 'saName'
        },
        {
          label: '取消说明',
          prop: 'cancelReason'
        },
        {
          label: '审核意见',
          prop: 'cancelAuditReason'
        },
        {
          label: '预约来源',
          prop: 'reserveSourceCode'
        },
        {
          label: '创建预约时间',
          prop: 'createdDate'
        }
      ],
      explainVisible: false,
      examineVisible: false,
      reserveOrderCode: '',
      updateControlId: '',
      paramsData: {},

      carSeriesCode: '',
      carSeriesCn: '',

      formField: {
        preComeDateStart: '',
        preComeDateEnd: '',
        saNameCode: '',
        reserveSourceCode: ''
      }
    }
  },
  mounted() {},
  methods: {
    closePop(val) {
      val == 1 ? (this.explainVisible = false) : (this.examineVisible = false)
    },
    selectTable() {
      this.explainVisible = false
      this.examineVisible = false
      this.$refs['multipleTable'].queryTable()
    },
    openExplain(index) {
      this.explainVisible = true
      this.reserveOrderCode = this.$refs['multipleTable'].list[
        index
      ].reserveOrderCode
      this.updateControlId = this.$refs['multipleTable'].list[
        index
      ].updateControlId
      this.carSeriesCode = this.$refs['multipleTable'].list[
        index
      ].carSeriesCode
      this.carSeriesCn = this.$refs['multipleTable'].list[
        index
      ].carSeriesCn
    },
    openExamine(index) {
      var list = this.$refs['multipleTable'].list[index]
      this.examineVisible = true
      this.paramsData.cancelReason = list.cancelReason
      this.paramsData.reserveOrderCode = list.reserveOrderCode
      this.paramsData.reserveOrderId = list.reserveOrderId
      this.paramsData.updateControlId = list.updateControlId
      console.log(this.paramsData)
    },
    receivingOrder(index) {
      const list = this.$refs['multipleTable'].list
      const receivingOrderApi = {
        apiUrl:
          '/mp/e3sh/aftersale/QueryAndConfirmAppointmentService/orderTaking.do',
        variables: {
          reserveOrderCode: list[index].reserveOrderCode,
          reserveOrderId: list[index].reserveOrderId,
          updateControlId: list[index].updateControlId
        }
      }
      this.$requestAPI(receivingOrderApi, '').then((response) => {
        this.$message({
          message: response.msg,
          type: 'warn',
          uration: 2000
        })
        this.$refs['multipleTable'].queryTable()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
